<template>
  <div id="reject-pop" v-show="show">
    <transition name='reject'>
    <div class="mini" v-show="show">
      <div class="mini-header">
        <div class="title">驳回申请</div>
        <div class="close-btn" @click="$emit('close')">
          <a-icon type="close" />
        </div>
      </div>
      <div class="mini-main">
        <a-textarea
          v-model="message"
          placeholder="请输入驳回的理由"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </div>
      <div class="button-group">
        <a-button type="primary" @click="submitMsg">提交</a-button>
      </div>
    </div>
    </transition>
  </div>
</template>

<script>
import { setRefused } from "@/api";
export default {
  name: "RejectPop",
  props: ["popData", "show"],
  data() {
    return {
      message: "",
    };
  },
  methods: {
    async submitMsg() {
      if (this.message.trim() === "") {
        this.$message.error("请输入驳回的理由！");
      } else {
        let result = await setRefused(this.popData.id, this.message);
        if (result.flag) {
          this.$message.success(result.msg);
          this.$router.push("/success?msg=" + "拒绝理由：" + this.message);
        }else{
          this.$message.error(result.msg)
        }
      }
    },
  },
};
</script>

<style lang='less'>
.reject-enter-active,
.reject-leave-active {
  transition: all 0.5s;
}
.reject-enter,
.reject-leave-to {
  transform: translateY(50vh);
  opacity: 0;
}
#reject-pop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  .mini {
    width: 400px;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    .mini-header {
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 18px;
        font-weight: 700;
      }
      .close-btn {
        cursor: pointer;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        padding: 5px;
        border: 1px solid #eee;
        color: #999;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .close-btn:hover {
        border-color: var(--themeColor1);
        color: var(--themeColor1);
      }
    }
    .mini-main {
      margin-top: 20px;
    }
    .button-group {
      margin-top: 20px;
      float: right;
    }
  }
}
</style>